@import '~@/assets/css/mixins';

.general_view {
  // 在内容布局中的tabs
  .page_content_tabs {
    :global {
      .ant-tabs-nav {
        position: relative;
        height: 40px;
        &::before {
          position: absolute;
          bottom: 1px;
          left: 0;
          display: block;
          width: 100%;
          border-bottom: 1px solid rgb(0 0 0 / 4%);
          content: '';
        }
      }
      .ant-tabs-content-holder {
        overflow-x: hidden;
        overflow-y: auto;
      }
      .ant-tabs-tab {
        border-bottom: 0 !important;
      }
      .ant-tabs-nav {
        margin: 0 !important;
      }
      .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
        margin-left: 8px !important;
      }
      .ant-tabs-nav .ant-tabs-tab {
        background: linear-gradient(138deg, #f3f5f8 0%, #fff 100%) !important;
        border: 2px solid #fff !important;
        border-top-left-radius: 4px !important;
        border-top-right-radius: 4px !important;
        box-shadow: 8px 8px 20px rgb(55 99 170 / 12%);
      }
      .ant-tabs-nav .ant-tabs-tab-active {
        background: #fff !important;
      }

      .ant-tabs-nav .ant-tabs-tab::before {
        position: absolute;
        left: -2px;
        width: 3px;
        height: 20px;
        border-right: 3px solid #0084ff;
        border-radius: 0 2px 2px 0;
        transform: scaleY(0);
        opacity: 0;
        transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
          opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
        content: '';
      }
      .ant-tabs-nav .ant-tabs-tab-active::before {
        transform: scaleY(1);
        opacity: 1;
        transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
          opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
      .ant-tabs-tab {
        min-width: 96px;
      }
    }
  }
  .page_content_title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 120px;
    margin-top: 24px;
    .title_item {
      position: relative;
      //float: left;
      //width: calc(20% - 19.2px);
      width: calc(25% - 18px);
      height: 100%;
      padding: 24px;
      background: #fff;
      .num {
        margin-right: 9px;
        color: rgb(0 0 0 / 85%);
        font-weight: bold;
        font-size: 24px;
        line-height: 33px;
      }
      p {
        text-indent: 10px;
      }
      p:nth-child(2) {
        margin-top: 20px;
        line-height: 33px;
      }
      .iconfont_box {
        position: absolute;
        top: calc(50% - 32px);
        right: 24px;
        width: 64px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        background: rgb(91 143 249 / 10%);
        border-radius: 50%;
      }
    }
    .title_item + .title_item {
      //margin-left: 24px;
    }
    .title_item_padding {
      margin-left: 24px;
    }
  }
  .column {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    height: 65px;
    padding: 0 24px;
    font-weight: @font-weight-bold;
    font-size: 20px;
    line-height: 18px;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
  }
  .page_content_content {
    display: flex;
    margin-top: 24px;
    .left {
      box-sizing: border-box;
      width: calc(25% - 18px);
      background: @white;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100px;
        margin: 24px 30px 24px 24px;
        padding: 0 24px;
        background: #f8f9fb;
        border-radius: 2px;
        .txt {
          display: flex;
          align-items: center;
          color: @gray-700;
          font-size: 14px;
          .num {
            margin-left: 8px;
            color: @primary;
            font-weight: @font-weight-bold;
            font-size: 24px;
          }
        }
        .iconfont_box {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          background: rgb(91 143 249 / 10%);
          border-radius: 50%;
          :global {
            .iconfont-colour2 {
              font-size: 20px;
            }
          }
        }
      }
      .item + .item {
        margin-bottom: 61px;
      }
    }
    .right {
      width: calc(75% - 5px);
      margin-left: 24px;
      background: @white;
      .charts_box {
        width: 100%;
        height: 309px;
        padding: 24px;
        //overflow-y: auto;
      }
    }
  }
  .page_content_footer {
    display: flex;
    margin-top: 24px;
    .left {
      box-sizing: border-box;
      width: 50%;
      background: @white;
      .ranking_list {
        box-sizing: border-box;
        height: 340px;
        padding: 16px 24px 28px;
        overflow-y: auto;
        .item {
          .info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .info_left {
              display: flex;
              align-items: center;
              .no {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                min-width: 24px;
                height: 24px;
                color: @white;
                font-weight: 500;
                background: @primary;
                border-radius: 2px;
              }
              .title {
                margin-left: 16px;
                padding-right: 20px;
                color: @gray-700;
                font-size: 14px;
                .text_overflow(1);
              }
            }
            .num {
            }
          }
        }
        .item + .item {
          margin-top: 13px;
        }
        .item:nth-child(1) {
          .info {
            .info_left {
              .no {
                background: @red;
              }
            }
          }
        }
        .item:nth-child(2) {
          .info {
            .info_left {
              .no {
                background: #f37334;
              }
            }
          }
        }
        .item:nth-child(3) {
          .info {
            .info_left {
              .no {
                background: #f3ac34;
              }
            }
          }
        }
      }
    }
    .right {
      box-sizing: border-box;
      width: 50%;
      margin-left: 24px;
      background: @white;
      .charts_box {
        width: 100%;
        height: 313px;
      }
    }
  }
  .empty_box {
    margin-top: 60px;
    text-align: center;
    img {
      width: 140px;
    }
    .note {
      margin-top: 16px;
      color: @gray-500;
      font-size: 14px;
    }
  }
}
